import React, { Component } from 'react'
import style from "./onsale.module.scss"
import {back_icon,certificate_icon} from '../../common/icon/svg'
const img = require("../../common/image/me/椭圆 1.png");

import {request} from "../../serverAPI/index";

export default class Onsale extends Component {
    state={
        userifo:null,
        onSellList:[],
        item:{},
        flag:false,
        flag1:false,
        flag2:false,
        active:null,
        discount:[
            {
                num:9,
                rec:false
            },
            {
                num:8,
                rec:false
            },
            {
                num:7,
                rec:false
            },
            {
                num:6,
                rec:false
            },
            {
                num:5,
                rec:true
            },
            {
                num:4,
                rec:false
            }
        ]
    }

//折扣
btn=(i)=>{
    this.setState({
        active:i
    })
    let {discount,item} = this.state
    this.amend.value = ((item.price)*(discount[i].num)/10).toFixed(2)
}    
//下架
del=()=>{
    
}

//多选框选中状态
getCheck=(e,item)=>{
    console.log(e.target.checked,item);
    let {onSellList} = this.state
    let index = onSellList.findIndex(ite=>{
        return ite.bid===item.bid
    })

    //下架书籍
    request({
        url:"/SoldoutBook",
        data:{
            bid:item.uid
        }
    })
}

// 改价
alterprice=(item)=>{
    this.setState({
        flag1:true,
        item
    })
    setTimeout(()=>{
        this.setState({
            flag2:true
        })
    },20)
}

// 当状态发生改变时
money=()=>{
    this.setState({
        active:null
    })
}

//确定改价
affirm=()=>{
    let {onSellList,item} = this.state
    if(this.amend.value!==""){
        request({
            url:"/AlterthepriceBook",
            method:"POST",
            data:{
                bid:item.bid,
                price:this.amend.value
            }
        }).then(res=>{
            if(res.data.code=="01"){
                let index = onSellList.findIndex(ite=>{
                    return ite.bid===item.bid
                })
                if(this.amend.value){
                    onSellList[index].price=this.amend.value
                }
                this.setState({
                    flag2:false,
                    onSellList,
                    active:null
                })
                setTimeout(()=>{
                    this.setState({
                        flag1:false
                    })
                },500)
            }else{
                console.log("服务器报错");
            }
        })
    }else{
        alert("改价不能为空")
    }
    
    
}

//退出改价
back=()=>{
    this.setState({
        flag2:false,
    })
    setTimeout(()=>{
        this.setState({
            flag1:false,
            active:null
        })
    },500)
}

    componentDidMount(){
        let temp = localStorage.getItem("userList");
        if(!temp) return;
        let userinfo = JSON.parse(temp);
        request({
            url:"/getMeOnSellBookList?uid="+userinfo.uid,
            method:"GET",
        }).then(res=>{
            if(res.data.code=="01"){
                let onSellList = res.data.data;
                this.setState({onSellList});
            }else{
                console.log("服务器报错");
            }
        });
    }

    render() {
        let bookItems = this.state.onSellList.map((book)=>{
            return (
                <li key={book.bid}>
                    <div className={style["info-box"]}>
                        <input style={{visibility:"hidden"}} type="checkbox" checked={!book.inventory} onChange={e=>this.getCheck(e,book)}/>
                        <img className={style["bookcover"]} src={"/apis/"+book.cover} />
                        <div className={style["info"]}>
                            <h3 className={style["bookneme"]}>{book.name}</h3>
                            <p className={style["description"]}>{book.description.length>=30?book.description+"...":book.description}</p>
                            <p className={style["labels"]}>
                                <span className={style.grade}>{book.grade}成新</span><span>{book.address.split(",")[0]}</span>
                            </p>
                            <p className={style["pricebox"]}>
                                <span className={style.price}>￥{book.price}</span><span className={style["origin_price"]}>￥{book.origin_price}</span>
                                <span className={style.inventory}>存量：{book.inventory}件</span>
                            </p>
                        </div>
                        {!book.relstatus? <span className={style["release-span"]}>审核中</span>
                          : (book.relstatus == 1 
                            ? <span className={style["release-span1"]}>通过</span>
                            : <span className={style["release-span2"]}>违规</span>)
                        }
                    </div>
                    <div className={style["op-box"]}>
                        <button>编辑</button><button onClick={()=>this.alterprice(book)}>改价</button>
                    </div>
                </li>
            )
        })
        return (
            <div className={style.onsale}>
                <div className={style.head}>
                    <span onClick={()=>this.props.history.push("/me")}>{back_icon}</span>
                    <span className={style.shou}>我的在售</span>
                </div>
                { bookItems.length<=0
                    ? <div className={style.logo}>
                            <img src={img.default}></img>
                            <div className={style.kong}>空无一物~</div>
                        </div>
                    :<div className={style.center}>
                        <p className={style["list-head"]}>
                            <span>商品列表</span>
                            {/* <span className={style.del} onClick={this.del}>{this.state.flag?"完成":"下架"}</span> */}
                        </p>
                        <ul className={style["book-list"]}>
                            {bookItems}
                        </ul>
                    </div>
                }
                <div className={style.ma} 
                    onClick={()=>this.props.history.push("/booksell")}>
                    去卖书
                </div>
                { this.state.flag1?<div className={this.state.flag2?style.mark+" "+style.active:style.mark}>
                        <div className={this.state.flag2?style.min+" "+style.active:style.min}>
                            <div className={style["mark-title"]}>
                                    <span className={style["mark-back"]} onClick={this.back}>{back_icon}</span>
                                    <span className={style["mark-gai"]}>改价</span>
                            </div>
                            <div className={style["mark-content"]}>
                                <div className={style["content-top"]}>
                                    <span>现价</span>
                                    <div className={style["content-right"]}>
                                        <span className={style["mark-new"]}>￥{this.state.item.price}</span>
                                        <span className={style["mark-old"]}>原价￥{this.state.item["origin_price"]}</span>
                                    </div>
                                </div>
                                <div className={style["content-bottom"]}>
                                    <span>改后价</span>
                                    <input placeholder="￥0" ref={c=>this.amend=c} onChange={this.money}></input> 
                                </div>
                                <ul className={style["mark-nav"]}>
                                    {
                                        this.state.discount.map((item,i)=>{
                                            return (
                                                <li key={i} onClick={()=>this.btn(i)} className={this.state.active===i?style.active:null}>
                                                    {item.num}折
                                                    {
                                                        item.rec?<span className={style.rec}>推荐</span>:null
                                                    }
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                                <div className={style["mark-footer"]} onClick={this.affirm}>
                                    确定
                                </div>
                            </div>
                        </div>
                    </div>:null
                }
            </div>
        )
    }
}
